<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog system-user-dialog"
      :custom-class="'panna-dialog_medium'"
      :append-to-body="true"
      :title="dataList.SetInspectionPlan"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      @closed="cancel"
    >
      <div>
        <el-form
          ref="ruleForm"
          :model="form"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item
            :label="dataList.InspectionTarget"
            style="width: 100%"
            prop="verificationObjectList"
          >
            <DicCheckBoxGroupList
              v-model="form.verificationObjectList"
              dict-code="verificationObject"
            ></DicCheckBoxGroupList>
          </el-form-item>
          <el-form-item
            :label="dataList.InspectionMethod"
            style="width: 100%"
            prop="verificationWayList"
          >
            <DicCheckBoxGroupList
              v-model="form.verificationWayList"
              dict-code="verificationWay"
            ></DicCheckBoxGroupList>
          </el-form-item>
          <el-form-item
            :label="dataList.InspectionProcedure"
            prop="verificationMethod"
          >
            <el-input
              v-model="form.verificationMethod"
              type="textarea"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="onSubmit('formData')">{{
          btn.Save
        }}</el-button>
        <el-button @click="cancel">{{ btn.Cancel }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DicCheckBoxGroupList from "../../../components/DicCheckBoxGroupList.vue";
export default {
  name: "DeviceVerificationSettingDialog",
  components: { DicCheckBoxGroupList },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    verificationData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      loading: false,
      form: {
        verificationWayList: [],
        verificationObjectList: [],
        verificationMethod: "",
      },
      rules: {
        verificationObjectList: [
          {
            type: "array",
            required: true,
            trigger: "blur",
            validator: this.Helper.validateArrayAndTextFunction,
          },
        ],
        verificationWayList: [
          {
            type: "array",
            required: true,
            trigger: "blur",
            validator: this.Helper.validateArrayAndTextFunction,
          },
        ],
        verificationMethod: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
      },
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {},
  created() {
    if (this.verificationData !== undefined) {
      this.form = this.verificationData;
    }
  },
  methods: {
    cancel() {
      this.$emit("update:dialogFormVisible", false);
    },
    closeDialog() {
      this.$parent.getList();
      this.cancel();
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$emit("settingDialogClose", this.form);
          this.cancel();
        } else {
          return false;
        }
      });
    },
  },
};
</script>
